<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta charset="utf-8" />
	<title></title>
	<link href="../css/bootstrap.min.css" rel="stylesheet">
	<link href="../css/bootstrap-select.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../css/bootstrap-treeview.min.css">
	<link href="../css/bootstrap-table.css" rel="stylesheet">
	<link href="../css/bootstrap-table-fixed-columns.css" rel="stylesheet">
	<link href="../css/font-awesome.min.css" rel="stylesheet">
	<link href="../css/JyyCommon.css" rel="stylesheet">
	<link href="../css/JyyTable.css" rel="stylesheet">
	<link href="../css/JyyTree.css" rel="stylesheet">
	<link href="../css/JyyMsgBox.css" rel="stylesheet">
	<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
	<script type="text/javascript" src="../js/jquery.form.min.js"></script> 
	<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-paginator.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-treeview.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-select.js"></script>
	<script type="text/javascript" src="../js/bootstrap-table.js"></script>
	<script type="text/javascript" src="../js/bootstrap-table-fixed-columns.js"></script>
	<script type="text/javascript" src="../js/jyy_modal.js"></script>
	<script type="text/javascript" src="../js/JyyCommon.js"></script>
	<script type="text/javascript" src="../js/JyyTable.js"></script>
	<script type="text/javascript" src="../js/JyyTree.js"></script>
	<script type="text/javascript" src="../js/JyyMsgBox.js"></script>
	<script type="text/javascript" src="../js/JyyLoading.js"></script>
	<script type="text/javascript" src="../js/echarts.js"></script>
	<script type="text/javascript" src="../../utils/CommonUtil.js"></script>
	<style>
	.heidenbt{
		display: none
	}
	.bootstrap-table {
	    margin: 30px!important;
	    width: calc(100% - 60px);
	}
</style>
	<script type="text/javascript">
		var tree = null;
		var projectId =  getQueryString("projectId")||'88888888888';
		$(function(){
			getDatePicker();
			initheat();
			selectJSData();
		});
		function selectData(){
			var startDate =  $('#startDate').val(); 
			var endDate =  $('#endDate').val();
			if(JyyCommon.isEmpty(startDate) || JyyCommon.isEmpty(endDate)){
				JyyMsgBox.alert({ title:"警告", message:"[日期]不可为空",type:"warning"}).on(function (e) {});
				return false;
			}
			  JyyModelLoading.start("qdlDiv");
			$.when(getEcahtData(startDate,endDate, "qdlEchartData")).done(function(echatData){
				createEchat(echatData);
				$.when(getEcahtData(startDate,endDate, "qdlTextData")).done(function(data){
					document.getElementById("itemValPvRate").innerHTML = data['rp']==undefined?"": data['rp'];
					document.getElementById("itemValWindRate").innerHTML = data['rw']==undefined?"": data['rw'];
					document.getElementById("itemValEleRate").innerHTML = data['re']==undefined?"": data['re'];
					
					document.getElementById("itemValPv").innerHTML = data['vp']==undefined?"": data['vp'];
					document.getElementById("itemValWind").innerHTML = data['vw']==undefined?"": data['vw'];
					document.getElementById("itemVal").innerHTML = data['v']==undefined?"": data['v'];
				});
				JyyModelLoading.end("qdlDiv");
			});
			
			JyyModelLoading.start("qdvDiv");
			$.when(getEcahtData(startDate,endDate, "qdvEchartData")).done(function(echatData){
				createEchat1(echatData);
				JyyModelLoading.end("qdvDiv");
			});
			
			
		}
		function initheat(){
			
			$.ajax({
				url: "../g/service/Sample/getNodeAreaIdList",
				type:'POST',
				async:false,
				dataType: "json",
				data:JSON.stringify({ projectId : projectId }),
				contentType:"application/json",
		        success:function(data){
					var content = '';
					var fristContentList = [];
					$.each(data.list,function(i,n){
						fristContentList.push(n.id)
						content += "<option value='" + n.id + "'>"+ n.name +"</option>";
					});
					$("#companyTypesAll").html(content);
					$("#companyTypesAll").selectpicker('val', fristContentList);
					
					var content = '';
						content += "<option value='11'>风电</option>";
						content += "<option value='12'>光伏</option>";
					$("#powerType").html(content);
					
					var content = '';
					content += "<option value='1'>弃电量</option>";
					content += "<option value='2'>弃电率</option>";
					$("#itemType").html(content);
					
					$("#companyTypesAll").selectpicker('refresh');
					
					selectData1();
		        }
			});
			
			
			
		}
		function selectData1(){
			JyyModelLoading.start("qdallDiv");
			var powerType =   $('#powerType').val(); 
			var itemType =   $('#itemType').val(); 
			$.when(getEcahtData1("qdallEchartData")).done(function(echatData){
				var  t='';
				if(powerType=='11'&&itemType=='1'){
					t ='弃风';
				}if(powerType=='12'&&itemType=='1'){
					t ='弃光';
				}if(powerType=='11'&&itemType=='2'){
					t ='弃风率';
				}if(powerType=='12'&&itemType=='2'){
					t ='弃光率';
				}
				creatEcharsheatmap(echatData,t);
				JyyModelLoading.end("qdallDiv");
			});
		}
		function selectJSData(){
			JyyModelLoading.start("jiangsuDiv");
			$.when(getJSEcahtData("jiangSuEchartData")).done(function(echatData){
				creatEcharsJiangSuMap(echatData);
				JyyModelLoading.end("jiangsuDiv");
			});
		}
		function createEchat(echartData) {
			var unitArr = ["常规火电", "启停火电", "热电","核电","抽蓄","燃油机组","储能","水电","风电","光伏","光热","区外"];
			var colorArr = ["#F01B2D", "#FF76FA", "#f076ee","#C7CEB2","#548DD4","#89A9E2","#FAC08F","#00B0F0","#92D050","#FFC000","#FFE957","#8B864E"];
			var option = {};
			var seriesData = echartData['seriesData'];
			var series = [];
			for(var j = 0;j < seriesData.length;j++) {
			    if(j==0)var base = -seriesData[j].series.reduce(function (min, val) {
			        return Math.floor(Math.min(min, val));
			    }, Infinity);
				if(seriesData[j].name == "负荷") {
					series.push({
						name: seriesData[j].name,
						type: 'line',
					    emphasis: {
					    	focus: 'none'
					    },
                        itemStyle : {
                            normal : {
                            	color:'#000000',
                                lineStyle:{
                                    color:'#000000'  
                                }
                            }
                        },
					    data: seriesData[j].series
					});
				}else if(unitArr.includes(seriesData[j].name)) {
					series.push({
						name: seriesData[j].name,
						type: 'line',
						stack: '总量',
				      	areaStyle: {},
					    emphasis: {
					    	focus: 'none'
					    },
                        itemStyle : {
                            normal : {
                            	color: colorArr[unitArr.indexOf(seriesData[j].name)],
                                lineStyle:{
                                    color:colorArr[unitArr.indexOf(seriesData[j].name)]
                                }
                            }
                        },
					    data: seriesData[j].series
					});
				} else {
					series.push({
						name: seriesData[j].name,
						type: 'line',
						stack: '总量',
				      	areaStyle: {},
					    emphasis: {
					    	focus: 'none'
					    },
					    data: seriesData[j].series
					});
				}
			}
			
			option = {
			  	tooltip: {
			    	trigger: 'axis',
			    	axisPointer: {
			      		type: 'cross',
			      		label: {
			        		backgroundColor: '#6a7985'
			      		}
			    	},
			    	position: function (pos, params, dom, rect, size) {
			    	      // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
			    	      var obj = {top: 60};
			    	      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 325;
			    	      return obj;
			    	  }
			  	},
			  	toolbox: {
					show: true,
					right: 30,
				    itemSize: 20,
					itemGap: 12,
			        feature: {
			        	myTool: {
			        		show: true,
			        		title: "导出为Excel",
			        		icon: 'image://../images/excel.png',
			        		onclick: (o) => {
								var option = o.option;
								var dataSource = [];
								var dataType = "\uFEFF"; //解决乱码问题
								dataType += option.xAxis[0].name+",";  //添加表格的头
								if(option.series.length > 0) {
									for(var i = 0;i < option.series.length;i++) {
										dataType += option.series[i].name+","
									}
									dataType = dataType.substr(0, dataType.length-1)
								}
								dataType += '\n'; // 以上是导出的Excel文件头部

								for(var i = 0;i < option.xAxis[0].data.length;i++) {
									var arr = [];
									for(var j = 0;j < option.series.length+1;j++) {
										if(j == 0) {
											arr.push(" "+option.xAxis[0].data[i]);
										} else {
											arr.push(option.series[j-1].data[i]);
										}
									}
									dataSource.push(arr);
								}
								// 从dataSource中取出数据存入数据源（dataType）
								dataSource.map(item => dataType += `${item.join(',')}\n`); 
								// 使用Blob，获得二进制实例
								const csvData = new Blob([dataType], {
								    type: 'text/csv'
								});
								// 创建a标签
								const _a = document.createElement('a');
								_a.href = URL.createObjectURL(csvData);
								_a.target = '_blank';
								_a.download = '全年新能源弃电情况'+JyyCommon.getNowDateString()+`.csv`;
								document.body.appendChild(_a);
								_a.click();
								document.body.removeChild(_a);
		                   	},
			        	},
			        	saveAsImage: {name:'全年新能源弃电情况'+JyyCommon.getNowDateString(),icon:"image://../images/downpic.png"}
			        }
			    },
			  	legend: { },
			  	grid: {
			    	left: '3%',
			    	right: '4%',
			    	bottom: '15%',
			    	containLabel: true
			  	},
			  	xAxis: [{
			  		name :'日期',
			    	type: 'category',
			      	boundaryGap: false,
			      	data: echartData['xAxisData']
			    }],
			  	yAxis: [{
			      	type: 'value',
			      	name: "MW"
			    }],
			    dataZoom: [{
			        type: "inside",
			    	start: 0,
			    	end: 100
			    },{
			    	start: 0,
			    	end: 100
			    }],
			  	series: series
			};
			var chartDom = document.getElementById("qdlEchart");
			var myChart = echarts.init(chartDom);
			myChart.clear();
			myChart.setOption(option);
			window.addEventListener("resize", () => {
				if(myChart){
					myChart.resize()
				}
			})
		}
		
		function createEchat1(echartData) {
			var unitArr = ["常规火电", "启停火电", "热电","核电","抽蓄","燃油机组","储能","水电","风电","光伏","光热","区外"];
			var colorArr = ["#F01B2D", "#FF76FA", "#f076ee","#C7CEB2","#548DD4","#89A9E2","#FAC08F","#00B0F0","#92D050","#FFC000","#FFE957","#8B864E"];
			var option = {};
			var seriesData = echartData['seriesData'];
			var series = [];
			for(var j = 0;j < seriesData.length;j++) {
			    if(j==0)var base = -seriesData[j].series.reduce(function (min, val) {
			        return Math.floor(Math.min(min, val));
			    }, Infinity);
				if(seriesData[j].name == "负荷") {
					series.push({
						name: seriesData[j].name,
						type: 'line',
					    emphasis: {
					    	focus: 'none'
					    },
                        itemStyle : {
                            normal : {
                            	color:'#000000',
                                lineStyle:{
                                    color:'#000000'  
                                }
                            }
                        },
					    data: seriesData[j].series
					});
				}else if(unitArr.includes(seriesData[j].name)) {
					series.push({
						name: seriesData[j].name,
						type: 'line',
						stack: '总量',
				      	//areaStyle: {},
					    emphasis: {
					    	focus: 'none'
					    },
                        itemStyle : {
                            normal : {
                            	color: colorArr[unitArr.indexOf(seriesData[j].name)],
                                lineStyle:{
                                    color:colorArr[unitArr.indexOf(seriesData[j].name)]
                                }
                            }
                        },
					    data: seriesData[j].series
					});
				} else {
					series.push({
						name: seriesData[j].name,
						type: 'line',
					    data: seriesData[j].series
					});
				}
			}
			
			option = {
			  	tooltip: {
			    	trigger: 'axis',
			    	axisPointer: {
			      		type: 'cross',
			      		label: {
			        		backgroundColor: '#6a7985'
			      		}
			    	},
			    	position: function (pos, params, dom, rect, size) {
			    	      // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
			    	      var obj = {top: 60};
			    	      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 325;
			    	      return obj;
			    	  }
			  	},
			  	toolbox: {
					show: true,
					right: 30,
				    itemSize: 20,
					itemGap: 12,
			        feature: {
			        	myTool: {
			        		show: true,
			        		title: "导出为Excel",
			        		icon: 'image://../images/excel.png',
			        		onclick: (o) => {
								var option = o.option;
								var dataSource = [];
								var dataType = "\uFEFF"; //解决乱码问题
								dataType += option.xAxis[0].name+",";  //添加表格的头
								if(option.series.length > 0) {
									for(var i = 0;i < option.series.length;i++) {
										dataType += option.series[i].name+","
									}
									dataType = dataType.substr(0, dataType.length-1)
								}
								dataType += '\n'; // 以上是导出的Excel文件头部

								for(var i = 0;i < option.xAxis[0].data.length;i++) {
									var arr = [];
									for(var j = 0;j < option.series.length+1;j++) {
										if(j == 0) {
											arr.push(" "+option.xAxis[0].data[i]);
										} else {
											arr.push(option.series[j-1].data[i]);
										}
									}
									dataSource.push(arr);
								}
								// 从dataSource中取出数据存入数据源（dataType）
								dataSource.map(item => dataType += `${item.join(',')}\n`); 
								// 使用Blob，获得二进制实例
								const csvData = new Blob([dataType], {
								    type: 'text/csv'
								});
								// 创建a标签
								const _a = document.createElement('a');
								_a.href = URL.createObjectURL(csvData);
								_a.target = '_blank';
								_a.download = '全年新能源弃电率'+JyyCommon.getNowDateString()+`.csv`;
								document.body.appendChild(_a);
								_a.click();
								document.body.removeChild(_a);
		                   	},
			        	},
			        	saveAsImage: {name:'全年新能源弃电率'+JyyCommon.getNowDateString(),icon:"image://../images/downpic.png"}
			        }
			    },
			  	legend: { },
			  	grid: {
			    	left: '3%',
			    	right: '4%',
			    	bottom: '15%',
			    	containLabel: true
			  	},
			  	xAxis: [{
			    	type: 'category',
			      	boundaryGap: false,
			      	data: echartData['xAxisData']
			    }],
			  	yAxis: [{
			  		name :'日期',
			      	type: 'value',
			      	name: "%"
			    }],
			    dataZoom: [{
			        type: "inside",
			    	start: 0,
			    	end: 100
			    },{
			    	start: 0,
			    	end: 100
			    }],
			  	series: series
			};
			var chartDom = document.getElementById("qdvEchart");
			var myChart = echarts.init(chartDom);
			myChart.clear();
			myChart.setOption(option);
			window.addEventListener("resize", () => {
				if(myChart){
					myChart.resize()
				}
			})
		}
		function creatEcharsheatmap(esdata,esname){
			var itemType =   $('#itemType').val(); 
			var captext = 'MW'
			if(itemType=='2'){
				captext = '%'
			}
			const hours = [
			    "1时",
				"2时",
				"3时",
				"4时",
				"5时",
				"6时",
				"7时",
				"8时",
				"9时",
				"10时",
				"11时",
				"12时",
				"13时",
				"14时",
				"15时",
				"16时",
				"17时",
				"18时",
				"19时",
				"20时",
				"21时",
				"22时",
				"23时",
				"24时"
			];
			/* const days = [
				'1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59','60','61','62','63','64','65','66','67','68','69','70','71','72','73','74','75','76','77','78','79','80','81','82','83','84','85','86','87','88','89','90','91','92','93','94','95','96','97','98','99','100','101','102','103','104','105','106','107','108','109','110','111','112','113','114','115','116','117','118','119','120','121','122','123','124','125','126','127','128','129','130','131','132','133','134','135','136','137','138','139','140','141','142','143','144','145','146','147','148','149','150','151','152','153','154','155','156','157','158','159','160','161','162','163','164','165','166','167','168','169','170','171','172','173','174','175','176','177','178','179','180','181','182','183','184','185','186','187','188','189','190','191','192','193','194','195','196','197','198','199','200','201','202','203','204','205','206','207','208','209','210','211','212','213','214','215','216','217','218','219','220','221','222','223','224','225','226','227','228','229','230','231','232','233','234','235','236','237','238','239','240','241','242','243','244','245','246','247','248','249','250','251','252','253','254','255','256','257','258','259','260','261','262','263','264','265','266','267','268','269','270','271','272','273','274','275','276','277','278','279','280','281','282','283','284','285','286','287','288','289','290','291','292','293','294','295','296','297','298','299','300','301','302','303','304','305','306','307','308','309','310','311','312','313','314','315','316','317','318','319','320','321','322','323','324','325','326','327','328','329','330','331','332','333','334','335','336','337','338','339','340','341','342','343','344','345','346','347','348','349','350','351','352','353','354','355','356','357','358','359','360','361','362','363','364','365'
			]; */
			const days =esdata. xAxisData;
			var max = 0;
          	var min = 0;
			
			const data = esdata.seriesData.map(function (item) {
				if(item[2]>max){
					max = item[2];
				}
				if(item[2]<min){
					min = item[2];
				}
		    return [item[1], item[0], item[2] || '-'];
		});
			
			var option = {
			  tooltip: {
			    position: 'top',
			    formatter: function(params) {
		            return   days[params.value[1]] + '- ' +  parseInt(parseInt(params.data[0])+1) + '时刻   ' +esname + '：'+ params.data[2]+captext;
		        }
			  },
			  grid: {
			    top: '1%',
			    left: '8%',
			    right: '10%',
		    	bottom: '17%'
			  },
			  xAxis: {
			    type: 'category',
			    data: hours,
			    splitArea: {
			      show: true
			    }
			  },
			  yAxis: {
			    type: 'category',
			    data: days,
			    splitNumber : 15,
			    splitArea: {
			      show: true
			    }
			  },
			  dataZoom: [
			        {
			            type: 'slider',
			            show: true,
			            yAxisIndex: [0],
			           /*  handleSize: 10,//左右2个滑动条的大小
			            handleIcon: "arrow",
			            handleSize: "80%", */
			            left: '92%',
			            start: 0,
			            end: 100
			        },
			         
			    ],
			  visualMap: {
			    calculable: true,
			    min: min,
                max: max,
			    left: 'right',
			    bottom: '16%',
	    	    //color: ['red','yellow','grey' ]
			  },
			  series: [
			    {
			      name: esname,
			      type: 'heatmap',
			      data: data,
			      label: {
			        show: false
			      },
			      emphasis: {
			        itemStyle: {
			          shadowBlur: 10,
			          shadowColor: 'rgba(0, 0, 0, 0.5)'
			        }
			      }
			    }
			  ]
			};
			var chartDom = document.getElementById("qdallEchart");
			var myChart = echarts.init(chartDom);
			myChart.clear();
			myChart.setOption(option);
			window.addEventListener("resize", () => {
				if(myChart){
					myChart.resize()
				}
			})
		}
		var mapChart = '';
		var mapOption  = '';
		var barOption  = '';
		function creatEcharsJiangSuMap(echartData) {
			mapChart = echarts.init(document.getElementById('jiangsuEchart'));
			
			$.get('../g/pages/map/powermap/jiang_su_geo.json', function (jsJson) {
				echarts.registerMap('jiang_su', jsJson, {});
				var data = echartData.data;
				var max = 0;
		        var min = 0;
				for(var i=0;i<data.length;i++){
					data[i].value
					if(data[i].value>max){
						max = data[i].value;
					}
					if(data[i].value<min){
						min = data[i].value;
					}
				}
				data.sort(function (a, b) {
					return a.value - b.value;
				});
				mapOption = {
	                grid: {
				        left: '1%',
				        right: '1%',
				        bottom: '1%',
				        top: '2%',
				        containLabel: true
				    },
	                visualMap: {
	                	min: min,
	                    max: max,
	                    left: 20,
	                    top: 'bottom',
	                    text: ['高', '低'],
	                    calculable: true,
	                    show:true,
	                    inRange:{
		    				color: ['#fff','#ff0000'],
	                    },
					},
				    series: [{
				        id: 'population',
				        type: 'map',
				        roam: true,
			          	label: { show: true },
				        itemStyle: {
				        	borderWidth:1,
				        	borderColor: '#8ac2e5',
				          	areaColor: '#8ac2e5'
				        },
				        map: 'jiang_su',
				        animationDurationUpdate: 1000,
				        universalTransition: true,
				        data: data
				   	}]
				};
				barOption = {
	                grid: {
				        left: '2%',
				        right: '5%',
				        bottom: '2%',
				        top: '7%',
				        containLabel: true
				    },
					tooltip: {
			            trigger: 'axis',
					    axisPointer: {
					        type: 'shadow'
				      	},
			            textStyle:{
			                align:'left'
			       		},
			            position: function(point, params, dom, rect, size) {
			                //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
			                var x = point[0]; //
			                var y = point[1];
			                var viewWidth = size.viewSize[0];
			                var viewHeight = size.viewSize[1];
			                var boxWidth = size.contentSize[0];
			                var boxHeight = size.contentSize[1];
			                var posX = 0; //x坐标位置
			                var posY = 0; //y坐标位置
			                if (x < boxWidth) { //左边放不开
			                    posX = 5;
			                } else { //左边放的下
			                    posX = x - boxWidth;
			                }
			                if (y < boxHeight) { //上边放不开
			                    posY = 5;
			                } else { //上边放得下
			                    posY = y - boxHeight;
			                }
			                return [posX, posY];
			            }
			        },
					xAxis: {
				    	type: 'value'
				    },
				    yAxis: {
				      	type: 'category',
				      	data: data.map(function (item) {
				        	return item.name;
				      	})
				    },
				    animationDurationUpdate: 1000,
				    series: {
				    	type: 'bar',
				      	id: 'population',
				      	data: data.map(function (item) {
				        	return item.value;
				      	}),
				      	universalTransition: true
				    }
				};
				mapChart.setOption(mapOption);
				window.addEventListener("resize", () => {
					if(mapChart){
						mapChart.resize()
					}
				})
			});
		}
		function stwitch(group, no) {
			for (var i = 0; i < 2; i++) {
				var tab = document.getElementById(group + "_" + i);
				if(tab){
					if (i === no) {
						tab.className = "bs_btn_focus";
					} else {
						tab.className = "bs_btn_normal";
					}
				}
			}
			if (group == "map_tab") {
				if(no == 0) {
					mapChart.setOption(mapOption, true);
				} else if(no == 1) {
					mapChart.setOption(barOption, true);
				}
				window.addEventListener("resize", () => {
					if(mapChart){
						mapChart.resize()
					}
				})
			}
		}
		
		//查询
		function select(){
			selectData();
		}
		//查询
		function select1(){
			selectData1();
		}
		
		function getQueryString (name){
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			return r ? unescape(r[2]) : null;
		}

		function getDatePicker(){
			$.ajax({
				url: "Sample/selectxnyqdDate",
				type:'POST',
				cache:false,
				dataType: "json",
				data:JSON.stringify({ projectId : projectId }),
				contentType:"application/json",
	            success:function(data){
	            	if(!data.respData.readonly){
		    			$("#startDate").datetimepicker({
		    				format : 'yyyy-mm-dd', // 展现格式
		    				autoclose : true, // 选择日期后关闭
		    				language : 'zh-CN', //显示语言为中文
		    				minView : "2",
		    				startDate : new Date(data.respData.startDate),
		    				endDate : new Date(data.respData.endDate)
		    			});
		    			$("#endDate").datetimepicker({
		    				format : 'yyyy-mm-dd', // 展现格式
		    				autoclose : true, // 选择日期后关闭
		    				language : 'zh-CN', //显示语言为中文
		    				minView : "2",
		    				startDate : new Date(data.respData.startDate),
		    				endDate : new Date(data.respData.endDate)
		    			});
		    			$('#startDate').on('changeDate', function(ev){
		    			    $('#endDate').datetimepicker('setStartDate', ev.date);
		    			    var d = $('#endDate').val();
		    			    if (d) {
		    			        var date = new Date(d.replace(/-/g, '/'));
		    			        if(date != 'Invalid Date' && date < ev.date){
		    			            $('#endDate').datetimepicker('setDate', ev.date)
		    			        }
		    			    }
		    			});
		    			$("#startDate").datetimepicker("setDate", new Date(data.respData.startDate));
		    			$("#endDate").datetimepicker("setDate", new Date(data.respData.startDate));
	            	} else { // 禁用日期控件
		    			$("#startDate").datetimepicker({
		    				format : 'yyyy-mm-dd', // 展现格式
		    				autoclose : true, // 选择日期后关闭
		    				language : 'zh-CN', //显示语言为中文
		    				minView : "2",
		    				startDate : new Date(),
		    				endDate : new Date()-1000*60*60*24
		    			});
		    			$("#endDate").datetimepicker({
		    				format : 'yyyy-mm-dd', // 展现格式
		    				autoclose : true, // 选择日期后关闭
		    				language : 'zh-CN', //显示语言为中文
		    				minView : "2",
		    				startDate : new Date(),
		    				endDate : new Date()-1000*60*60*24
		    			});
						JyyMsgBox.alert({ title:"警告", message:"暂无相关数据",type:"warning"}).on(function (e) {});
	            	}
	            	getSelectDatas();
	            }
			});
		}

		function getEcahtData(startDate, endDate, method){
			var companyTypes = $("#companyTypes").selectpicker('val');
			if(companyTypes.length==0){
				companyTypes = null;
			}
			var res = $.ajax({
				url: "../g/service/Sample/"+method,
				type:'POST',
				cache:false,
				dataType: "json",
				data:JSON.stringify({ projectId : projectId, startDate : startDate,endDate : endDate, companytype : companyTypes }),
				contentType:"application/json",
	            success:function(data){
					return data;
	            }
			});
			return res;
		}
		function getJSEcahtData(method){
			var res = $.ajax({
				url: "../g/service/Sample/"+method,
				type:'POST',
				cache:false,
				dataType: "json",
				data:JSON.stringify({ projectId : projectId }),
				contentType:"application/json",
	            success:function(data){
					return data;
	            }
			});
			return res;
		}
		function getEcahtData1(method){
			var companyTypes = $("#companyTypesAll").selectpicker('val');
			if(companyTypes.length==0){
				companyTypes = null;
			}
			var powerType =   $('#powerType').val(); 
			var itemType =   $('#itemType').val(); 
			var res = $.ajax({
				url: "../g/service/Sample/"+method,
				type:'POST',
				cache:false,
				dataType: "json",
				data:JSON.stringify({ projectId : projectId, type : powerType,itemType : itemType, companytype : companyTypes }),
				contentType:"application/json",
	            success:function(data){
					return data;
	            }
			});
			return res;
		}
		
		function getSelectDatas(){
			$.ajax({
				url: "../g/service/Sample/getNodeAreaIdList",
				type:'POST',
				async:false,
				dataType: "json",
				data:JSON.stringify({ projectId : projectId }),
				contentType:"application/json",
		        success:function(data){
					var content = '';
					var fristContent = '';
					$.each(data.list,function(i,n){
						if(i == 0){
							fristContent = n.id;
						}
						content += "<option value='" + n.id + "'>"+ n.name +"</option>";
					});
					$("#companyTypes").html(content);
					$("#companyTypes").selectpicker('val', fristContent);
					$('.selectpicker').selectpicker('refresh');
					selectData();
		        }
			});
		}
		
		

		function invoke(url, args, callback){
			var r, op = {
					url: '../g/service/Sample/' + url,
					type:'POST',
					cache:false,
					async:true,
					dataType:'json',
					data:args ? JSON.stringify(args) : null,
					contentType:"application/json"
				};
			if(typeof callback == 'function'){
				op.success = function(data){
					if(data.error)return alert(data.error);
					callback(data);
				}
			} else {
				op.async = false;
				op.success = function(data){
					r = data
				};
			}
			$.ajax(op);
			if(r)if(r.error){
				alert(r.error);
				return null;
			}
			return r;
		};
	</script>
<style type="text/css">
	body, html{
		width: 100%;
		height: 100%;
	}
	.selBtn {
		float:left;
		margin-left:20px;
		height:30px;
		width:70px;
		background-color:#1890FF;
		border-radius:5px;
		border: 0px;
		color:white;
	}
	.selBtn:hover {
		background-color: #00BFFF;
	}
	.shadow {
		box-shadow: 0 0.05rem 1rem rgba(0,0,0,0.15)!important;
		border-radius: 0.25rem!important;
		margin-left: 20px;
		margin-bottom: 20px;
	}
	.bootstrap-select:not(.input-group-btn), .bootstrap-select[class*="col-"] {
		float: left;
	}
	.cumCard {
		margin-left: 10px;
		width: 250px;
		display : inline-block;
	}
	.amount {
		float: left;
		display: inline-block;
	}
	.val {
		display: inline-block;
    	font-size: 16px;
	    font-weight: bolder;
	    color: #00CFFF;
	    text-align: right;
	    margin-left: 10px;
	}
	.bs_btn_normal {
		position:absolute;
		top:0px;
		left:0px;
		width:50px;
		height:30px;
		line-height:30px;
		text-align:center;
		font-size: 12px;
		font-family: ΢���ź�;
		color:#0A2A67;
		background:url(../images/tab_focus.png) no-repeat;
		cursor:pointer;
	}
	.bs_btn_focus {
		position:absolute;
		top:0px;
		left:0px;
		width:50px;
		height:30px;
		line-height:30px;
		text-align:center;
		font-size: 12px;
		font-family: ΢���ź�;
		color:#ffffff;
		background:url(../images/tab_normal.png) no-repeat;
		cursor:pointer;
	}
</style>
</head>
<body>
<div style="overflow-y: auto;width: 100%;height: 100%;">
	<div style="height: 50px;width: calc(100% - 20px);">
		<div class="col-md-12" style="padding-left: 5px;padding-right: 5px;margin-top: 10px;margin-left: 20px;">
			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 40px;font-weight: normal;">日期</label>
            <input id="startDate" class="form-control" placeholder="请选择日期" readonly style="float: left;margin-top: -3px;padding: 5px;width: 184px;font-weight: normal;">
			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 20px;padding: 0px;width: 30px;font-weight: normal;">~</label>
            <input id="endDate" class="form-control" placeholder="请选择日期" readonly style="float: left;margin-top: -3px;padding: 5px;width: 184px;font-weight: normal;">
            
            
            <label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 20px;padding: 0px;width: 60px;font-weight: normal;">节点区域</label>
			<select class="form-control selectpicker" multiple data-actions-box="true" data-selected-text-format="count > 4"
					id="companyTypes" title="请选择区域" data-select-all-text="全选" data-deselect-all-text="取消全选"
					data-width="150px" data-size="10" data-count-selected-text="已选择{1}个区域中的{0}个"></select>

			<button class="selBtn" onclick=select()>查询</button>
		</div>
	</div>
	<div id="qdlDiv" class="shadow" style="width: calc(100% - 40px);min-height: 500px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">全年新能源弃电情况</span>
		</p>
		<div id="cumulativeDiv" style="margin-left:30px;line-height: 50px;width: calc(100% - 30px);">
			<p style="font-size: 14px;margin: 0px;text-align: center;display: inline-block;">累计弃光率:</p>
			<div class="val" id="itemValPvRate">0</div>
			<div style="margin-left: 5px;display: inline-block;">%</div>
			<p style="font-size: 14px;margin: 0px;text-align: center;display: inline-block;margin-left: 3%;">累计弃风率:</p>
			<div class="val" id="itemValWindRate">0</div>
			<div style="margin-left: 5px;display: inline-block;">%</div>
			<p style="font-size: 14px;margin: 0px;text-align: center;display: inline-block;margin-left: 3%;">累计弃电率:</p>
			<div class="val" id="itemValEleRate">0</div>
			<div style="margin-left: 5px;display: inline-block;">%</div>
			 
			<p style="font-size: 14px;margin: 0px;text-align: center;display: inline-block;margin-left: 3%;">累计弃光电量:</p>
			<div class="val" id="itemValPv">0</div>
			<div style="margin-left: 5px;display: inline-block;">亿千瓦时</div>
			<p style="font-size: 14px;margin: 0px;text-align: center;display: inline-block;margin-left: 3%;">累计弃风电量:</p>
			<div class="val" id="itemValWind">0</div>
			<div style="margin-left: 5px;display: inline-block;">亿千瓦时</div>
			<p style="font-size: 14px;margin: 0px;text-align: center;display: inline-block;margin-left: 3%;">累计弃电量全年占比:</p>
			<div class="val" id="itemVal">0</div>
			<div style="margin-left: 5px;display: inline-block;">%</div>
		</div>
		<div id="qdlEchart" style="width: 100%;height: 400px;margin-top: 25px;"></div>
	</div>
	<div id="qdvDiv" class="shadow" style="width: calc(100% - 40px);min-height: 450px;position: relative;margin-bottom: 10px;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">全年新能源弃电率</span>
		</p>
		<div id="qdvEchart" style="width: 100%;height: 400px;margin-top: 25px;"></div>
	</div>
	
	<div style="height: 50px;width: calc(100% - 20px);">
		<div class="col-md-12" style="padding-left: 5px;padding-right: 5px;margin-top: 10px;margin-left: 20px;">
            
            <label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 20px;padding: 0px;width: 60px;font-weight: normal;">节点区域</label>
			<select class="form-control selectpicker" multiple data-actions-box="true" data-selected-text-format="count > 4"
					id="companyTypesAll" title="请选择区域" data-select-all-text="全选" data-deselect-all-text="取消全选"
					data-width="150px" data-size="10" data-count-selected-text="已选择{1}个区域中的{0}个"></select>

			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 20px;padding: 0px;width: 60px;font-weight: normal;">电源类型</label>
			<select class="form-control" id="powerType" style="float: left;margin-top: -3px;padding: 5px;width: 120px;font-weight: normal;"></select>
			
			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 20px;padding: 0px;width: 60px;font-weight: normal;">弃电指标</label>
			<select class="form-control" id="itemType" style="float: left;margin-top: -3px;padding: 5px;width: 120px;font-weight: normal;"></select>
			
			<button class="selBtn" onclick=select1()>查询</button>
		</div>
	</div>
	<div id="qdallDiv" class="shadow" style="width: calc(100% - 40px);min-height: 450px;position: relative;height: 600px;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">全年新能源弃电情况色阶图</span>
		</p>
		<div id="qdallEchart" style="width: 100%;height: 600px;margin-top: 25px;"></div>
	</div>
	<div id="jiangsuDiv" class="shadow" style="width: calc(100% - 40px);position: relative;height: 555px;margin-bottom: 10px;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">全年新能源弃电统计</span>
		</p>
		<div style="position: absolute;width: 120px;z-index: 100;right: 100px;">
			<div id="map_tab_0" class="bs_btn_focus" style="left:0px;border-radius: 18px 0px 0px 18px;width: 60px" onclick="stwitch('map_tab',0)">地图</div>
			<div id="map_tab_1" class="bs_btn_normal" style="left:60px;border-radius: 0px 18px 18px 0px;width: 60px" onclick="stwitch('map_tab',1)">统计图</div>
		</div>
		<div id="jiangsuEchart" style="width: 100%;height: 500px;"></div>
	</div>
</div>
</body>
</html>